<script>
export default {
  name: "my-Library",
};
</script>

<script setup>
import { reactive, ref } from "vue";
import { ElTable } from "element-plus";
import { regionData, codeToText } from "element-china-area-data";
import Breadcrumb from "../../layout/Breadcrumb.vue";

//省级地区
let options = ref(regionData);
const handleChange = (value) => {
  let provinceCode = value[0]; //省编码
  let cityCode = value[1]; //市编码
  let province = codeToText[value[0]]; //省中文
  let city = codeToText[value[1]]; //市中文
};

//name输入框
const formInline = reactive({
  user: "",
});

//新增
const onSubmit = () => {
  console.log("submit!");
};

//删除
const onDelete = () => {
  console.log("删除");
};

//table
const multipleTableRef = ref();

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-08",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-06",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>

<template>
  <!-- 面包屑 -->
  <div class="Bread">
    <Breadcrumb />
  </div>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <div class="top">
      <el-form-item label="名称" class="top-name">
        <el-input
          style="width: 300px"
          v-model="formInline.user"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="所在地" class="Address">
        <el-cascader
          placeholder="请选择"
          :options="options"
          @change="handleChange"
          style="width: 300px"
        ></el-cascader>
      </el-form-item>
      <el-form-item class="top-bottom">
        <el-button class="inquire" type="primary">查询</el-button>
        <el-button class="reset" type="primary" @click="onDelete"
          >重置</el-button
        >
      </el-form-item>

      <div class="center">
        <el-form-item class="">
          <el-button class="new" type="primary">新增</el-button>
          <el-button
            style="margin-left: 32px"
            class="delete"
            type="primary"
            @click="onDelete"
            >批量删除</el-button
          >
        </el-form-item>
      </div>

      <!-- table表格 -->
      <!-- <el-table
        class="library-table"
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          class="library-top"
          prop="date"
          label="Date"
          width="180"
          type="selection "
        />
        <el-table-column
          class="library-top"
          prop="name"
          label="Name"
          width="180"
          type="selection "
        />
        <el-table-column class="library-top" prop="address" label="Address" />
      </el-table> -->

      <el-table
        class="library-table"
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column class="library-top" type="selection" width="180" />
        <el-table-column class="library-top" label="Date" width="180">
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
          class="library-top"
          property="name"
          label="Name"
          width="120"
        />
        <el-table-column
          class="library-top"
          property="address"
          label="Address"
          show-overflow-tooltip
        />
      </el-table>
    </div>
  </el-form>
</template>

<style scoped lang="scss">
.demo-form-inline {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

//查询按钮
.reset {
  border-color: rgba(217, 217, 217, 1);
  color: black;
  background-color: rgba(255, 255, 255, 1);
}
.delete {
  color: black;
  background-color: rgba(243, 243, 243, 1);
  border-color: rgba(217, 217, 217, 1);
}

.top {
  padding-top: 40px;
  padding-left: 30px;
  position: relative;
  .Address {
    position: absolute;
    left: 480px;
  }
  .top-bottom {
    position: absolute;
    left: 900px;
  }
  .center {
    margin-top: 20px;
  }
  .library-table {
    margin-top: 30px;
    .library-top {
      background-color: gray;
    }
  }
}

//面包屑
.Bread {
  background-color: #fff;
  padding-top: 20px;
  padding-left: 20px;
}
</style>
